import 'package:flutter/material.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:flutter_axrjc/widget/custom_radio.dart';
import 'package:flutter_axrjc/widget/custom_selection.dart';
import 'package:flutter_axrjc/widget/custom_text_field.dart';
import 'package:get/get.dart';

import 'logic.dart';

class AddNoticeDialogPage extends StatelessWidget {
  const AddNoticeDialogPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: GetBuilder(
        init: AddNoticeDialogLogic(),
        assignId: true,
        builder: (logic) {
          final state = logic.state;
          return GestureDetector(
            child: Material(
              color: Colors.transparent,
              child: Center(
                  child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10)),
                      width: Get.width * 0.8,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Padding(
                            padding: EdgeInsets.symmetric(vertical: 15),
                            child: Text(
                              "新增提醒",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          Row(
                            children: [
                              const Text("提醒标签"),
                              Expanded(
                                child: Obx(() {
                                  return CustomTextField(
                                    style: const TextStyle(fontSize: 14),
                                    textAlign: TextAlign.end,
                                    value: state.label.value,
                                    onChanged: (t) {
                                      state.label.value = t;
                                    },
                                    inputDecoration: const InputDecoration(
                                        hintText: "请输入提醒标签",
                                        hintStyle: TextStyle(
                                            fontSize: 14, color: Colors.grey),
                                        isCollapsed: true,
                                        isDense: true,
                                        border: InputBorder.none),
                                  );
                                }),
                              ),
                            ],
                          ),
                          const Divider(),
                          const Padding(
                            padding: EdgeInsets.symmetric(vertical: 5),
                            child: Row(
                              children: [
                                Text("重复提醒"),
                              ],
                            ),
                          ),
                          Obx(() {
                            return GridView.builder(
                              shrinkWrap: true,
                              physics: const NeverScrollableScrollPhysics(),
                              itemCount: state.gridlist.length,
                              gridDelegate:
                                  const SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 4,
                                      crossAxisSpacing: 5,
                                      mainAxisSpacing: 5,
                                      childAspectRatio: 1.8),
                              itemBuilder: (BuildContext context, int index) {
                                var bean = state.gridlist[index];
                                return InkWell(onTap: () {
                                  state.ifRepeat.value = bean.value;
                                }, child: Obx(() {
                                  return bean.value == state.ifRepeat.value
                                      ? Container(
                                          decoration: BoxDecoration(
                                              color: orangeColor,
                                              borderRadius:
                                                  BorderRadius.circular(8)),
                                          child: Center(
                                              child: Text(
                                            bean.title,
                                            style: const TextStyle(
                                                color: Colors.white),
                                          )))
                                      : Container(
                                          decoration: BoxDecoration(
                                              color: primaryColor,
                                              borderRadius:
                                                  BorderRadius.circular(8)),
                                          child: Center(
                                              child: Text(
                                            bean.title,
                                          )));
                                }));
                              },
                            );
                          }),
                          Obx(() {
                            return CustomRadio(
                              "提醒类型",
                              [
                                ValueOption("灯具检测", 0),
                                ValueOption("休息", 1),
                                ValueOption("护眼操", 2),
                              ],
                              groupValue: state.remindType.value,
                              onChanged: (i) {
                                state.remindType.value = i;
                              },
                            );
                          }),
                          Obx(() {
                            return CustomSelection(
                              '时间',
                              value: state.time.value,
                              onPressed: () async {
                                TimeOfDay? tfd = await showTimePicker(
                                    context: context,
                                    initialTime: TimeOfDay.now());
                                if (tfd != null) {
                                  state.time.value =
                                      "${tfd.hour}:${tfd.minute}";
                                }
                              },
                            );
                          }),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              const Text(
                                "是否开启",
                                style: TextStyle(
                                    color: Color(0xff666666), fontSize: 15),
                              ),
                              Obx(() {
                                return Switch(
                                  value: state.isopen.value,
                                  onChanged: (v) {
                                    state.isopen.value = v;
                                  },
                                  activeColor: orangeColor,
                                  thumbColor:
                                      MaterialStateProperty.resolveWith<Color>(
                                          (states) => Colors.white),
                                );
                              }),
                            ],
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              children: [
                                Expanded(
                                    child: InkWell(
                                  onTap: Get.back,
                                  child: Container(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 8),
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          color: Colors.grey.withAlpha(40)),
                                      child: const Center(child: Text("取消"))),
                                )),
                                const SizedBox(
                                  width: 20,
                                ),
                                Expanded(
                                    child: InkWell(
                                  onTap: logic.save,
                                  child: Container(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 8),
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          color: orangeColor),
                                      child: const Center(
                                          child: Text(
                                        "保存",
                                        style: TextStyle(color: Colors.white),
                                      ))),
                                ))
                              ],
                            ),
                          ),
                        ],
                      ))),
            ),
          );
        },
      ),
    );
  }
}
